<template>
  <div class="w-table">
    <div class="w-tr flex items-center">
      <div
        v-for="(item, i) in props.columns"
        :key="i"
        :style="{
          flex: item.width || '1',
          width: 0,
          textAlign: item.align || 'center',
        }"
        class="w-th"
      >
        <div
          class="font-size-16 color-1 font-weight-500 flex items-center justify-center"
        >
          {{ item.title }}
        </div>
      </div>
    </div>
    <div
      v-for="(item, i) in props.data"
      :key="i"
      class="w-ur flex items-center"
    >
      <div
        :style="{
          flex: item1.width || '1',
          width: 0,
          textAlign: item1.align || 'center',
        }"
        class="w-td"
        v-for="(item1, i1) in props.columns"
        :key="i1"
      >
        <!-- 处理价格 -->
        <slot
          :name="item1.key"
          v-if="slots[item1.key]"
          :row="item"
          :index="i"
        ></slot>
        <div v-else>
          {{ item[item1.key] }}
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
const slots = defineSlots();

const props = defineProps({
  data: {
    type: Array,
    default: () => [],
  },
  columns: {
    type: Array,
    default: () => [],
  },
});
</script>
<style lang="scss" scoped>
.w-table {
  border-left: 0 !important;
  border-top: 1px solid $uni-border-color-2 !important;
  .w-th,
  .w-td {
    border: 0 !important;
    border-right: 0 !important;
    padding: 10rpx 4rpx;
  }

  .w-tr {
    border-bottom: 1px solid $uni-border-color-2;
    .w-th {
      background: #f5f6f8;
      border-bottom: 1px solid $uni-border-color-2;
      color: $uni-text-color-1;
    }
  }
  .w-ur {
    border-bottom: 1px solid $uni-border-color-2;
  }
}
</style>
